<html>
<head>
	<script src="../js/jquery-1.7.2.min.js" type="text/javascript" ></script>
	<script src="../js/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script>
	<script src="../js/studentvoice.js" type="text/javascript"></script>
	<script src="../js/ClassDiagramPlugin.js" type="text/javascript"></script>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
	<script type="text/javascript" src="../js/jcookie.js"></script>
	<style type="text/css">
		.divsize { width:50px;height:50px;border:1px solid black; float:left }
		.leftround { border-top-left-radius:15px;border-bottom-left-radius:15px }
		.rightround { border-top-right-radius:15px;border-bottom-right-radius:15px }
			* {
				margin: 0px;
				padding: 0px;
			}
			
			html, body {
			        height:100%;
					min-height:100%;
			}
			
			div {
				float : left;
				text-align: center;
				height: 50%;
				width: 50%;
			}
			
			div#understand {
				background-color: #cdc;
			}
			
			div#dontunderstand {
				background-color: #dcc;
			}
		</style>
		
		<script type="text/javascript">
			function allignButtons()
			{
				if($(window).width() < $(window).height()) {
					$("div").width('100%');
					$("div").height('49.99%');
				} else {
					$("div").width('50.0%');
					$("div").height('100%');
				}
				
				//get the width of the parent  
				var parent_height = $('img').parent().height();  
			  
				//get the width of the image  
				var image_height = $('img').height();  
			  
				//calculate how far from top the image should be  
				var top_margin = (parent_height - image_height)/2;  
			  
				//and change the margin-top css attribute of the image  
				$('img').css( 'margin-top' , top_margin);  

			}
			$(startup);
			$(window).resize(allignButtons);
			
			function startup() {
				$("div#understand").click(function () {
					$(this).animate({ backgroundColor: "#7f7" }, 'slow');
					$("div#dontunderstand").animate({ backgroundColor: "#aaa" }, 'slow');
				});
				$("div#dontunderstand").click(function () {
					$(this).animate({ backgroundColor: "#f77" }, 'slow');
					$("div#understand").animate({ backgroundColor: "#aaa" }, 'slow');
				});
				allignButtons();
			}
		</script>
</head>
<body>
	
	<span style="margin:20px 40px; display: inline-block;" id="Topic">topic: No topic</span>
		
		<div id=understand>
			<img src="understand.png" />
		</div>
		<div id=dontunderstand>
			<img src="dontunderstand.png" />
		</div>
	<!--
	<div id="understand">
		<img src="../img/understand_200.png">
	</div>
	<div id="dontunderstand">
		<img src="../img/confused_200.png">
	</div>
	-->
	<div id="testdiv" style="display:none"><a href="test">Test</a></div>

<script type="text/javascript">
var Subjects;
var cookieName_lecture = 'lectureKey';
var cookieName_student = 'studentKey';

/*$(document).ready(function(){
	 });*/
	
jQuery(function () {
		
		// update lecture's cookie
		var lectureKey = getParameterByName("lectureKey");
		var cookieOptions = {expires: 1, path: '/'};
		/* { expires: 2, path: '/', domain: 'yourwebsite.com', secure: true } */
		$.cookie(cookieName_lecture, lectureKey , cookieOptions);
		console.log("lecture key: " + lectureKey);
		
		/* Picture click function settings */
		$('#understand').click(function () {
			setStudent(true);
		});
		
		$('#dontunderstand').click(function () {
			setStudent(false);
		});
		
		setInterval("getClassData()", 5 * 1000);

		Subjects = $.getJSON('/getClassLayoutData', {lectureKey : lectureKey}, function (data) {
				Subjects = data;
				getClassData();
		});
		
		setStudent(false);
	});

	var getClassData = function () {
		var lectureKey=$.cookie(cookieName_lecture);
		$.getJSON('/getClassData', {lectureKey : lectureKey}, function (data) { 
			for (var i in Subjects)
				if (Subjects[i].key == data.subjectInd)
					$('#Topic').text("topic:" + Subjects[i].name);

			if (data.isQuizOn) {
				console.log('quiz on');
				console.log(data);
				$('#testdiv a').attr('href', 'test?quizKey=' + data.quizKey);
				$('#testdiv').css('display', 'block');
			}
			else
				console.log('quiz off');
		});
	};

	var send = function (val) {
		var data = {
			input:val
		};

		$.post('', data, function () { alert('success'); });
	};
</script> 
<script type="text/javascript">

function setStudent(understand) {
	var cookie=$.cookie(cookieName_student);
	console.log("Old key: "+cookie);
	var key=cookie;
	
	var returnFunction=function(data) {
		var newKey=data;
		if(newKey && newKey!="") {
			// updateCookie
			var cookieOptions = {expires: 1, path: '/'};
			/* { expires: 2, path: '/', domain: 'yourwebsite.com', secure: true } */
			$.cookie(cookieName_student, newKey , cookieOptions);
			console.log("New key: "+newKey);
		}
	};
	
	// get lecture key
	var lectureKey = $.cookie(cookieName_lecture);
	
	// set Understand State in DataStore
	if(cookie) {
		$.get('/setStudentVoice',{ studentKey : key, understand : understand.toString(), lectureKey: lectureKey }, returnFunction);
		console.log("cookie==true");
	} else {
		$.get('/setStudentVoice',{ understand : understand.toString() , lectureKey: lectureKey }, returnFunction);
		console.log("cookie==false");
	}
}

</script>
<script type="text/javascript">
function getParameterByName(name)
{
  name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
  var regexS = "[\\?&]" + name + "=([^&#]*)";
  var regex = new RegExp(regexS);
  var results = regex.exec(window.location.search);
  if(results == null)
    return "";
  else
    return decodeURIComponent(results[1].replace(/\+/g, " "));
}
</script>
</body>
</html>
